<template>
  <h2>计算属性和监视</h2>
  <fieldset>
    <legend>姓名操作</legend>
    姓名: <input type="text" placeholder="亲输入姓氏" v-model="user.firstName"><br>
    名字: <input type="text" placeholder="亲输入名字" v-model="user.lastName"><br>
  </fieldset>
  <fieldset>
    <legend>计算属性与监视</legend>

    姓名: <input type="text" placeholder="显示姓名" v-model="fullName1"><br>
    姓名: <input type="text" placeholder="显示姓名" v-model="fullName2"><br>
    姓名: <input type="text" placeholder="显示姓名" v-model="fullName3"><br>
  </fieldset>
</template>
<script lang='ts'>
import { defineComponent, reactive, computed, watch,ref,watchEffect } from 'vue'
export default defineComponent({
  name: 'App',

  setup() {
    // 定义一个响应式的对象
    const user = reactive({
      //姓氏
      firstName: '东方',
      // 名字
      lastName: '不败'
    })
    //通过计算属性实现的方式,实现第一个姓名的显示
    // vue3中的计算属性
    //如果计算属性函数中只传入一个回调函数,表示的是get

    //返回的是一个Ref类型对象
    const fullName1 = computed(() => {
      return user.firstName + '_' + user.lastName
    })
    // console.log("fullName1",fullName1);

    // 第二个姓名
    const fullName2 = computed({
      get() {
        return user.firstName + '_' + user.lastName
      },
      set(val: string) {
        // console.log('=========',val);
        const names = val.split('_')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    })
    // 第三个姓名:
    //监视------监视指定的数据 
    // watch(user, (val) => {
    //   return null
    // })
    // 下面是通过将val解构过来的
    const fullName3 = ref('')
    watch(user, ({ firstName, lastName }) => {
      fullName3.value = firstName+'_'+lastName
    },{immediate:true,deep:true})
    // imediate:true默认就执行一次 不然就不会默认执行,只有监视的数据改变了之后才会执行
    // deep是深度监视,比如user对象中还有对象,他也会监视他的变化


    // 这种监视,不需要配置immediate,本身默认就会进行监视,(默认执行一次)
    // 监视
    
    
    // 监视fullName3的数据,改变firstName和lastName 
    watchEffect(()=>{
      const names = fullName3.value.split('_')
      user.firstName = names[0]
      user.firstName = names[1]
    })
    // watch----可以监视多个数据的
    watch([user.firstName,user.lastName],()=>{
      //这里的代码没有执行,
      console.log("=====");
    })
    return {
      user,
      fullName1,
      fullName2,
      fullName3
    }
  }
})
</script>